{% extends 'registration/lr_style.html' %}
{% block title %}注册{% endblock %}
{#{% block css %}#}
{#    <style>#}
{##}
{#        .account {#}
{#            width: 400px;#}
{#            border: 1px solid #dddddd;#}
{#            border-radius: 5px;#}
{#            box-shadow: 5px 5px 20px #aaa;#}
{#            padding: 20px 50px;#}
{#            background-color: #ffffff;#}
{#            opacity: 0.9;#}
{#        }#}
{##}
{#        .account h2, .account p {#}
{#            margin-top: 10px;#}
{#            text-align: center;#}
{#        }#}
{##}
{#        .account form div {#}
{#            margin-top: 10px;#}
{#        }#}
{##}
{#        .form-group {#}
{#            display: flex;#}
{#            flex-direction: column;#}
{#        }#}
{##}
{#        .form-group label {#}
{#            margin-bottom: 5px;#}
{#        }#}
{##}
{#        .form-group input {#}
{#            padding: 10px;#}
{#            border: 1px solid #ccc;#}
{#            border-radius: 5px;#}
{#        }#}
{##}
{#        .form-group #flush_img {#}
{#            display: flex;#}
{#            align-items: center;#}
{#        }#}
{##}
{#        .form-group #flush_img img {#}
{#            margin-left: 10px;#}
{#        }#}
{##}
{#        .text-center {#}
{#            text-align: center;#}
{#        }#}
{##}
{#        .text-center button {#}
{#            width: 80px;#}
{#        }#}
{#    </style>#}
{#{% endblock %}#}
{% block content %}
        <div class="account  mx-auto" style="background-color: #ffffff;opacity: 0.9">
            <h2>用户注册</h2>
            {% if error_message %}
                <p style="color: red">{{ error_message }}</p>
            {% endif %}

            <div class="panel-body">
                <form method="post" id="register-form">
                    {% csrf_token %}
                    <div class="form-group">
                        <label for="username">用户名</label>
                        <input type="text" class="form-control" placeholder="用户名" id="username" name="username"
                               required="">
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="password" class="form-control" placeholder="密码" id="password" name="password"
                               required="">
                    </div>
                    <div class="form-group">
                        <label for="confirm_password">确认密码</label>
                        <input type="password" class="form-control" placeholder="再次输入密码" id="confirm_password"
                               required="" name="confirm_password">
                    </div>
                    <div class="form-group">
                        <label for="id_code" style="display: inline-block;">图片验证码</label>
                        <div style="display: inline-block;" id="flush_img">
                            <img src="/image/code/" alt="" id="image_code">
                        </div>
                        <div>
                            <input type="text" name="code" class="form-control" placeholder="请输入图片验证码"
                                   required="" id="id_code">
                            <span style="color: red;"></span>
                        </div>
                    </div>
                    <div class="text-center">
                        <button type="submit" class="btn btn-primary" style="width: 80px;">注册</button>
                    </div>
                </form>
            </div>
            <p>已有账户？<a href="/login/">登录</a></p>

        </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#register-form').submit(function (event) {
                var username = $('#username').val();
                var password = $('#password').val();

                if (username.length < 2 || username.length > 10) {
                    alert('用户名长度必须在2到10个字符之间');
                    event.preventDefault(); // 阻止表单提交
                } else if (password.length < 4 || password.length > 20) {
                    alert('密码长度必须在4到20个字符之间');
                    event.preventDefault(); // 阻止表单提交
                }
            });
        });
    </script>

{% endblock %}
